<template>
    <div class="cart">
        <nav-bar>
            <div class="car" slot='middle'>购物车({{getCartLength}})</div>
        </nav-bar>
        <Scroll class="content" ref="scroll">
            <cart-list></cart-list>
        </Scroll>
        <CartBottomBar></CartBottomBar>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
import Scroll from 'components/common/Scroll/Scroll'
import CartList from './cartChild/CarList'
import CartBottomBar from './cartChild/CartBottomBar'
import {mapGetters} from 'vuex'
export default {
    components: {
        NavBar,
        Scroll,
        CartList,
        CartBottomBar
    },
    //一进入此页面就会触发
    activated () {
      this.$refs.scroll.refresh()  
    },
    computed: {
        ...mapGetters(['getCartLength']),
    }

};
</script>

<style lang="less" scoped>
.cart{
    height: 100vh;
}
.nav-bar{
   background-color: pink;
   color: white;
}
.content{
    height: calc(100% - 44px - 49px - 40px);
    overflow: hidden;
}

</style>

